<template>
  <div class="payment-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <button class="back-btn" @click="goBack">
          <i class="icon-arrow-left">←</i>
        </button>
        <h1 class="page-title">支付订单</h1>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <div class="loading-spinner"></div>
      <span>处理中...</span>
    </div>

    <!-- 支付内容 -->
    <div v-else class="payment-content">
      <!-- 订单信息 -->
      <div class="order-info" v-if="currentOrder">
        <h2 class="section-title">订单信息</h2>
        <div class="order-details">
          <div class="order-item">
            <span class="label">订单号：</span>
            <span class="value">{{ currentOrder.orderNumber }}</span>
          </div>
          <div class="order-item">
            <span class="label">总金额：</span>
            <span class="value price">¥{{ currentOrder.totalAmount }}</span>
          </div>
          <div class="order-item">
            <span class="label">收货人：</span>
            <span class="value">{{ currentOrder.receiverName }}</span>
          </div>
          <div class="order-item">
            <span class="label">联系电话：</span>
            <span class="value">{{ currentOrder.receiverPhone }}</span>
          </div>
          <div class="order-item">
            <span class="label">收货地址：</span>
            <span class="value">{{ currentOrder.receiverAddress }}</span>
          </div>
        </div>
      </div>

      <!-- 支付方式选择 -->
      <div class="payment-methods" v-if="!paymentInfo">
        <h2 class="section-title">选择支付方式</h2>
        <div class="methods-list">
          <div 
            v-for="(name, key) in paymentMethods" 
            :key="key"
            class="method-item"
            :class="{ active: selectedPaymentMethod === key }"
            @click="selectPaymentMethod(key)"
          >
            <div class="method-icon">
              <span v-if="key === 'ALIPAY'">💰</span>
              <span v-else-if="key === 'WECHAT'">💳</span>
              <span v-else-if="key === 'BANK_CARD'">🏦</span>
              <span v-else>💵</span>
            </div>
            <div class="method-info">
              <div class="method-name">{{ name }}</div>
              <div class="method-desc">{{ getPaymentMethodDesc(key) }}</div>
            </div>
            <div class="method-check">
              <span v-if="selectedPaymentMethod === key">✓</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付二维码 -->
      <div class="payment-qr" v-if="paymentInfo">
        <h2 class="section-title">扫码支付</h2>
        <div class="qr-container">
          <div class="qr-code">
            <img 
              :src="paymentInfo.qrCodeUrl" 
              :alt="`${paymentInfo.paymentMethod}支付二维码`"
              class="qr-image"
            />
          </div>
          <div class="qr-info">
            <div class="qr-amount">¥{{ paymentInfo.amount }}</div>
            <div class="qr-method">{{ getPaymentMethodName(paymentInfo.paymentMethod) }}</div>
            <div class="qr-tip">请使用{{ getPaymentMethodName(paymentInfo.paymentMethod) }}扫码支付</div>
          </div>
        </div>
        
        <!-- 支付状态 -->
        <div class="payment-status">
          <div v-if="paymentStatus === 'pending'" class="status-pending">
            <div class="status-icon">⏳</div>
            <div class="status-text">等待支付中...</div>
            <div class="status-tip">请尽快完成支付，二维码30分钟内有效</div>
          </div>
          <div v-else-if="paymentStatus === 'paid'" class="status-paid">
            <div class="status-icon">✅</div>
            <div class="status-text">支付成功！</div>
            <div class="status-tip">正在跳转到订单页面...</div>
          </div>
        </div>

        <!-- 支付操作 -->
        <div class="payment-actions">
          <button class="btn btn-secondary" @click="refreshPayment">刷新二维码</button>
          <button class="btn btn-primary" @click="checkPaymentStatus">检查支付状态</button>
        </div>
      </div>

      <!-- 支付按钮 -->
      <div class="payment-actions" v-if="!paymentInfo">
        <button 
          class="pay-btn" 
          @click="handlePayment"
          :disabled="!selectedPaymentMethod || loading"
        >
          {{ loading ? '处理中...' : `立即支付 ¥${currentOrder?.totalAmount || 0}` }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, onUnmounted } from 'vue' // 导入Vue组合式API
import { useRouter } from 'vue-router' // 导入路由
import { usePaymentStore } from '@/stores/payment' // 导入支付store
import { useCartStore } from '@/stores/cart' // 导入购物车store
import { useUserStore } from '@/stores/user' // 导入用户store

// 路由
const router = useRouter() // 获取路由实例

// 状态管理
const paymentStore = usePaymentStore() // 获取支付store
const cartStore = useCartStore() // 获取购物车store
const userStore = useUserStore() // 获取用户store

// 响应式数据
const selectedPaymentMethod = ref('') // 选中的支付方式

// 计算属性
const currentOrder = computed(() => paymentStore.currentOrder) // 当前订单
const paymentMethods = computed(() => paymentStore.paymentMethods) // 支付方式列表
const paymentInfo = computed(() => {
  console.log('支付信息计算属性:', paymentStore.paymentInfo) // 调试信息
  return paymentStore.paymentInfo
}) // 支付信息
const paymentStatus = computed(() => paymentStore.paymentStatus) // 支付状态
const loading = computed(() => paymentStore.loading) // 使用store中的loading状态

// 生命周期
onMounted(() => {
  loadPaymentMethods() // 加载支付方式
  
  // 如果有支付信息，开始自动检查支付状态
  if (paymentInfo.value) {
    startPaymentCheck()
  }
})

onUnmounted(() => {
  // 清理定时器
  if (paymentCheckInterval) {
    clearInterval(paymentCheckInterval)
  }
})

// 监听支付状态变化
watch(paymentStatus, (newStatus) => {
  if (newStatus === 'paid') {
    // 支付成功后自动跳转
    setTimeout(() => {
      cartStore.clearCartState() // 清空购物车
      paymentStore.clearPaymentState() // 清空支付状态
      router.push('/order') // 跳转到订单页面
    }, 2000) // 2秒后跳转
  }
})

// 自动检查支付状态
let paymentCheckInterval: NodeJS.Timeout | null = null

// 开始自动检查支付状态
const startPaymentCheck = () => {
  if (paymentCheckInterval) {
    clearInterval(paymentCheckInterval)
  }
  
  paymentCheckInterval = setInterval(async () => {
    if (currentOrder.value && paymentStatus.value === 'pending') {
      await checkPaymentStatus()
    } else {
      // 如果支付完成，停止检查
      if (paymentCheckInterval) {
        clearInterval(paymentCheckInterval)
      }
    }
  }, 3000) // 每3秒检查一次
}

// 方法
const loadPaymentMethods = async () => {
  try {
    await paymentStore.fetchPaymentMethods() // 获取支付方式列表
  } catch (error) {
    console.error('加载支付方式失败:', error) // 打印错误信息
  }
}

const goBack = () => {
  router.back() // 返回上一页
}

const selectPaymentMethod = (method: string) => {
  selectedPaymentMethod.value = method // 选择支付方式
}

const getPaymentMethodDesc = (method: string) => {
  // 获取支付方式描述
  const descriptions: {[key: string]: string} = {
    'ALIPAY': '推荐使用支付宝支付',
    'WECHAT': '推荐使用微信支付',
    'BANK_CARD': '支持各大银行',
    'CASH': '货到付款'
  }
  return descriptions[method] || '请选择支付方式'
}

const getPaymentMethodName = (method: string) => {
  // 获取支付方式名称
  const names: {[key: string]: string} = {
    'ALIPAY': '支付宝',
    'WECHAT': '微信支付',
    'BANK_CARD': '银行卡',
    'CASH': '货到付款'
  }
  return names[method] || method
}

const handlePayment = async () => {
  if (!selectedPaymentMethod.value) { // 如果没有选择支付方式
    alert('请选择支付方式') // 提示用户
    return
  }

  if (!currentOrder.value) { // 如果没有当前订单
    alert('订单信息不存在') // 提示用户
    return
  }

  const userId = userStore.user?.id // 获取用户ID
  if (!userId) { // 如果用户未登录
    alert('请先登录') // 提示用户
    return
  }

  try {
    const result = await paymentStore.pay( // 调用支付方法
      userId, 
      currentOrder.value.id, 
      selectedPaymentMethod.value
    )
    
    if (result.success) { // 如果支付成功
      // 开始自动检查支付状态
      startPaymentCheck()
    } else { // 如果支付失败
      alert(result.message || '生成支付二维码失败') // 提示用户
    }
  } catch (error) {
    console.error('支付失败:', error) // 打印错误信息
    alert('支付失败，请重试') // 提示用户
  }
}

const refreshPayment = async () => {
  if (!currentOrder.value) return
  
  const userId = userStore.user?.id
  if (!userId) {
    alert('请先登录')
    return
  }

  try {
    // 重新生成支付二维码
    const result = await paymentStore.pay(userId, currentOrder.value.id, selectedPaymentMethod.value)
    if (result.success) {
      alert('二维码已刷新')
    } else {
      alert(result.message || '刷新二维码失败')
    }
  } catch (error) {
    console.error('刷新支付二维码失败:', error)
    alert('刷新二维码失败，请重试')
  }
}

const checkPaymentStatus = async () => {
  if (!currentOrder.value) return
  
  const userId = userStore.user?.id
  if (!userId) {
    alert('请先登录')
    return
  }

  try {
    const result = await paymentStore.checkPayment(userId, currentOrder.value.id)
    if (result.success && result.paid) {
      alert('支付成功！')
      cartStore.clearCartState()
      paymentStore.clearPaymentState()
      router.push('/order')
    } else {
      alert('支付未完成，请继续支付')
    }
  } catch (error) {
    console.error('检查支付状态失败:', error)
    alert('检查支付状态失败，请重试')
  }
}
</script>

<style scoped>
.payment-page {
  min-height: 100vh; /* 最小高度为视口高度 */
  background-color: #f5f5f5; /* 背景色 */
}

.page-header {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 16px; /* 内边距 */
  background-color: #fff; /* 背景色 */
  border-bottom: 1px solid #eee; /* 底部边框 */
}

.header-left {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  gap: 12px; /* 间距 */
}

.back-btn {
  background: none; /* 无背景 */
  border: none; /* 无边框 */
  font-size: 20px; /* 字体大小 */
  cursor: pointer; /* 鼠标指针 */
  color: #333; /* 颜色 */
}

.page-title {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  margin: 0; /* 外边距 */
}

.loading {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  padding: 60px 20px; /* 内边距 */
}

.loading-spinner {
  width: 40px; /* 宽度 */
  height: 40px; /* 高度 */
  border: 4px solid #f3f3f3; /* 边框 */
  border-top: 4px solid #007bff; /* 顶部边框 */
  border-radius: 50%; /* 圆角 */
  animation: spin 1s linear infinite; /* 旋转动画 */
  margin-bottom: 16px; /* 底部外边距 */
}

@keyframes spin {
  0% { transform: rotate(0deg); } /* 0度 */
  100% { transform: rotate(360deg); } /* 360度 */
}

.payment-content {
  padding: 16px; /* 内边距 */
}

.section-title {
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  margin: 0 0 16px 0; /* 外边距 */
  color: #333; /* 颜色 */
}

.order-info {
  background-color: #fff; /* 背景色 */
  border-radius: 8px; /* 圆角 */
  padding: 16px; /* 内边距 */
  margin-bottom: 16px; /* 底部外边距 */
}

.order-details {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 8px; /* 间距 */
}

.order-item {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

.label {
  color: #666; /* 颜色 */
  font-size: 14px; /* 字体大小 */
}

.value {
  color: #333; /* 颜色 */
  font-size: 14px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
}

.price {
  color: #e74c3c; /* 价格颜色 */
  font-weight: 600; /* 字体粗细 */
}

.payment-methods {
  background-color: #fff; /* 背景色 */
  border-radius: 8px; /* 圆角 */
  padding: 16px; /* 内边距 */
  margin-bottom: 16px; /* 底部外边距 */
}

.methods-list {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 12px; /* 间距 */
}

.method-item {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  padding: 16px; /* 内边距 */
  border: 1px solid #eee; /* 边框 */
  border-radius: 8px; /* 圆角 */
  cursor: pointer; /* 鼠标指针 */
  transition: all 0.3s ease; /* 过渡动画 */
}

.method-item:hover {
  border-color: #007bff; /* 悬停时边框颜色 */
  background-color: #f8f9fa; /* 悬停时背景色 */
}

.method-item.active {
  border-color: #007bff; /* 激活时边框颜色 */
  background-color: #e3f2fd; /* 激活时背景色 */
}

.method-icon {
  font-size: 24px; /* 字体大小 */
  margin-right: 12px; /* 右边距 */
}

.method-info {
  flex: 1; /* 弹性增长 */
}

.method-name {
  font-size: 16px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
  color: #333; /* 颜色 */
  margin-bottom: 4px; /* 底部外边距 */
}

.method-desc {
  font-size: 12px; /* 字体大小 */
  color: #666; /* 颜色 */
}

.method-check {
  color: #007bff; /* 颜色 */
  font-weight: bold; /* 字体粗细 */
  font-size: 18px; /* 字体大小 */
}

.payment-qr {
  background-color: #fff; /* 背景色 */
  border-radius: 8px; /* 圆角 */
  padding: 16px; /* 内边距 */
  margin-bottom: 16px; /* 底部外边距 */
}

.qr-container {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  gap: 16px; /* 间距 */
  margin-bottom: 16px; /* 底部外边距 */
}

.qr-code {
  width: 200px; /* 宽度 */
  height: 200px; /* 高度 */
  background-color: #fff; /* 背景色 */
  border: 1px solid #eee; /* 边框 */
  border-radius: 8px; /* 圆角 */
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  overflow: hidden; /* 隐藏溢出 */
}

.qr-image {
  max-width: 100%; /* 最大宽度 */
  max-height: 100%; /* 最大高度 */
  object-fit: contain; /* 保持图片比例 */
}

.qr-info {
  text-align: center; /* 文本居中 */
}

.qr-amount {
  font-size: 24px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #e74c3c; /* 价格颜色 */
  margin-bottom: 8px; /* 底部外边距 */
}

.qr-method {
  font-size: 18px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
  color: #333; /* 颜色 */
  margin-bottom: 8px; /* 底部外边距 */
}

.qr-tip {
  font-size: 14px; /* 字体大小 */
  color: #666; /* 颜色 */
}

.payment-status {
  margin-top: 16px; /* 顶部外边距 */
  padding: 16px; /* 内边距 */
  background-color: #f8f9fa; /* 背景色 */
  border-radius: 8px; /* 圆角 */
  border: 1px solid #eee; /* 边框 */
}

.status-pending {
  color: #f39c12; /* 等待支付颜色 */
  text-align: center; /* 文本居中 */
}

.status-paid {
  color: #27ae60; /* 支付成功颜色 */
  text-align: center; /* 文本居中 */
}

.status-icon {
  font-size: 48px; /* 字体大小 */
  margin-bottom: 12px; /* 底部外边距 */
}

.status-text {
  font-size: 20px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  margin-bottom: 8px; /* 底部外边距 */
}

.status-tip {
  font-size: 14px; /* 字体大小 */
  color: #666; /* 颜色 */
}

.payment-actions {
  display: flex; /* 弹性布局 */
  justify-content: space-around; /* 两端对齐 */
  gap: 10px; /* 间距 */
  padding: 16px 0; /* 内边距 */
}

.btn {
  flex: 1; /* 弹性增长 */
  padding: 12px 20px; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 8px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  cursor: pointer; /* 鼠标指针 */
  transition: background-color 0.3s ease; /* 过渡动画 */
}

.btn-primary {
  background-color: #007bff; /* 背景色 */
  color: white; /* 颜色 */
}

.btn-primary:hover {
  background-color: #0056b3; /* 悬停时背景色 */
}

.btn-secondary {
  background-color: #6c757d; /* 背景色 */
  color: white; /* 颜色 */
}

.btn-secondary:hover {
  background-color: #5a6268; /* 悬停时背景色 */
}

.btn:disabled {
  background-color: #ccc; /* 禁用时背景色 */
  cursor: not-allowed; /* 禁用时鼠标指针 */
}
</style> 